import {} from '@/api/Home'
import { color } from 'echarts'
import * as echarts from 'echarts'
export default function Home() {
  const count = 1200
  const state = reactive({
    option1: {
      grid: {
        top: 0,
        bottom: 0,
        left: '1%',
        right: '1%',
      },
      xAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, 0],
      },
      yAxis: [
        {
          type: 'category',
          data: [''],
          axisLine: { show: false },
          axisTick: [
            {
              show: false,
            },
          ],
        },
      ],
      series: [
        {
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'transparent',
                },
                {
                  offset: 0,
                  color: '#7db6fd',
                },
              ]),
            },
          },
          barWidth: 20,
          data: [100],
        },
        {
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          data: [100],
          itemStyle: {
            normal: {
              color: 'rgba(28, 128, 213, 0.19)',
            },
          },
        },
      ],
    },
    option2: {
      grid: {
        top: 0,
        bottom: 0,
        left: '1%',
        right: '1%',
      },
      xAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, 0],
      },
      yAxis: [
        {
          type: 'category',
          data: [''],
          axisLine: { show: false },
          axisTick: [
            {
              show: false,
            },
          ],
        },
      ],
      series: [
        {
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#721c3a63',
                },
                // {
                //   offset: 0.6,
                //   color: '#fc2b2b',
                // },
                {
                  offset: 0,
                  color: '#fc2b2b',
                },
              ]),
            },
          },
          barWidth: 20,
          data: [100],
        },
        {
          type: 'bar',
          barWidth: 20,
          barGap: '-100%',
          data: [100],
          itemStyle: {
            normal: {
              color: 'rgba(28, 128, 213, 0.19)',
            },
          },
        },
      ],
    },
    option3: {
      tooltip: {
        trigger: 'item',
      },
      grid: {
        left: '10%',
        top: '8%',
        right: '20%',
        bottom: '16%',
      },
      legend: {
        show: true,
        orient: 'vertical',
        bottom: '9%',
        right: '0%',
        itemWidth: 6,
        itemHeight: 6,
        textStyle: {
          color: '#f4f5ff',
          fontSize: 9,
        },
        selectedMode: false,
      },
      xAxis: [
        {
          data: ['10.10', '10.11', '10.12', '10.13', '10.14', '10.15', '10.16'],
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 8,
            },
            margin: 5, //刻度标签与轴线之间的距离。
          },

          axisLine: {
            show: true, //不显示x轴
            lineStyle: {
              color: '#384267',
            },
          },
          axisTick: {
            show: false, //不显示刻度
          },
          boundaryGap: true,
          splitLine: {
            show: false,
            // width: 0.08,
            lineStyle: {
              type: 'solid',
              color: '#03202E',
            },
          },
        },
      ],
      yAxis: [
        {
          splitLine: {
            show: true,
            lineStyle: {
              color: '#384267',
              type: 'dashed',
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#384267',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 8,
            },
          },
        },
      ],
      series: [
        //柱顶圆片0000
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [10, 4], //调整截面形状
          symbolOffset: [-8, -2],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#cfffff',
                  },
                  {
                    offset: 1,
                    color: '#cfffff',
                  },
                ],
                false
              ),
            },
          },
          data: ['310', '240', '240', '240', '240', '240', '240'],
        },
        //柱体
        {
          name: '新厂区在岗人数',
          type: 'bar',
          barWidth: 10,
          barGap: '60%',
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#66cfc6',
                  },
                  {
                    offset: 1,
                    color: '#66cfc6',
                  },
                ],
              },
            },
          },

          data: ['310', '240', '240', '240', '240', '240', '240'],
        },

        //柱顶圆片
        {
          name: '',
          type: 'pictorialBar',
          symbolSize: [10, 4], //调整截面形状
          symbolOffset: [8, -2],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#cfffff',
                  },
                  {
                    offset: 1,
                    color: '#cfffff',
                  },
                ],
                false
              ),
            },
          },
          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
        //柱体
        {
          name: '老厂区在岗人数',
          type: 'bar',
          barWidth: 10,
          barGap: '60%',
          itemStyle: {
            normal: {
              color: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                type: 'linear',
                global: false,
                colorStops: [
                  {
                    //第一节下面
                    offset: 0,
                    color: '#449deb',
                  },
                  {
                    offset: 1,
                    color: '#449deb',
                  },
                ],
              },
            },
          },

          data: ['195', '195', '195', '195', '195', '195', '195'],
        },
      ],
    },
    option4: {
      tooltip: {
        trigger: 'item',
      },
      legend: {
        orient: 'vertical',
        right: '10%',
        itemWidth: 14, // 修改图例标记的宽度
        itemHeight: 9,
        top: '23%',
        textStyle: {
          color: '#fff',
          fontSize: 9,
        },
        data: ['在线监控数', '掉线监控数', '门禁监控数', '掉线门禁数'],
      },
      title: {
        text: `总设备数\n${count}`,
        left: '34%',
        top: '38%',
        textAlign: 'center',
        textStyle: {
          color: '#fff',
          fontSize: 12,
          lineHeight: 20,
        },
      },
      series: [
        {
          name: '大环',
          type: 'gauge',
          splitNumber: 18,
          radius: '115%',
          center: ['35%', '50%'],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [[1, '#1f59a7']],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: 'auto',
              width: 1.5,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        {
          name: '小环',
          type: 'gauge',
          splitNumber: 18,
          // radius: ["74%", "75%"],
          radius: '110%',
          center: ['35%', '50%'],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: '#1f59a7',
              width: 1.5,
            },
            length: 7,
            splitNumber: 6,
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        },
        {
          type: 'pie',
          radius: ['65%', '75%'],
          center: ['35%', '50%'],
          color: ['#3bad7a', '#e74143', '#ffaa45', '#58d9f9'],
          itemStyle: {
            borderWidth: 5,
            borderColor: '#132f55',
          },
          data: [
            {
              value: 335,
              name: '在线监控数',
            },
            {
              value: 310,
              name: '掉线监控数',
            },
            {
              value: 234,
              name: '门禁监控数',
            },
            {
              value: 235,
              name: '掉线门禁数',
            },
          ],
          labelLine: {
            normal: {
              show: true,
              length: 12,
              length2: 18,
            },
          },
          label: {
            normal: {
              formatter: '{c|{c}}{d|(台)}',
              rich: {
                d: {
                  fontSize: 10,
                  color: '#fff',
                  align: 'left',
                  padding: 4,
                },
                c: {
                  fontSize: 10,
                  color: '#fff',
                  align: 'left',
                  padding: 4,
                },
              },
            },
          },
        },
      ],
    },
    option5: {
      grid: {
        top: 0,
        bottom: 0,
        left: '5%',
        right: '5%',
      },
      xAxis: {
        show: false,
        type: 'value',
        boundaryGap: [0, 0],
      },
      yAxis: [
        {
          type: 'category',
          data: [''],
          axisLine: { show: false },
          axisTick: [
            {
              show: false,
            },
          ],
        },
      ],
      series: [
        {
          type: 'bar',
          zlevel: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                {
                  offset: 1,
                  color: '#2992f3',
                },
                {
                  offset: 0,
                  color: '#2992f3',
                },
              ]),
            },
          },
          barWidth: 13,
          data: [40],
        },
        {
          type: 'bar',
          barWidth: 13,
          barGap: '-100%',
          data: [100],
          itemStyle: {
            normal: {
              color: '#1b4674',
            },
          },
        },
      ],
    },
    option6: {
      series: [
        {
          name: '水球图',
          type: 'liquidFill',
          radius: '80%',
          center: ['50%', '55%'],
          waveAnimation: 10, // 动画时长
          amplitude: 5, // 振幅
          data: [0.6],
          color: 'rgba(68, 197, 253,1)',
          label: {
            normal: {
              color: '#44C5FD',
              textStyle: {
                fontSize: 30,
                fontWeight: 'normal',
              },
            },
          },
          outline: {
            show: false,
          },
          backgroundStyle: {
            color: 'rgba(68, 197, 253,.3)',
          },
        },
      ],
    },
    option7: {
      angleAxis: {
        show: false,
        max: (100 * 360) / 270,
        type: 'value',
        startAngle: 225,
        splitLine: {
          show: false,
        },
      },
      //圆环宽度
      barMaxWidth: 5,
      radiusAxis: {
        show: false,
        type: 'category',
        z: 10,
      },
      polar: {
        //圆环大小
        radius: '180%',
      },
      series: [
        {
          type: 'bar',
          data: [
            {
              value: '100',
              itemStyle: {
                color: 'rgba(41, 146, 244, 1)',
                shadowColor: 'rgba(41, 146, 244, 0.5)',
                shadowBlur: 3,
              },
            },
          ],
          barGap: '-100%',
          coordinateSystem: 'polar',
          roundCap: true,
          z: 2,
          animationDuration: 2000,
        },
        {
          name: '',
          type: 'gauge',
          min: 0,
          max: 100,
          splitNumber: 10,
          radius: '70%', //图表尺寸
          center: ['50%', '50%'],
          itemStyle: {
            color: '#fff',
          },
          detail: {
            color: 'transparent',
          },
          data: [
            {
              value: '67',
            },
          ],
          axisLabel: {
            show: false, // 取消刻度标签的显示
          },
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              shadowBlur: 0,
              color: [
                [0.2, '#2992f4'],
                [0.4, '#2992f4'],
                [0.6, '#2992f4'],
                [1, '#2992f4'],
              ],
            },
          },
          axisTick: {
            show: true,
            lineStyle: {
              color: 'auto',
              width: 1,
            },
            length: 1,
            splitNumber: 2,
          },
          splitLine: {
            show: true,
            length: 1,
            lineStyle: {
              color: 'auto',
              width: 1,
            },
          },
        },
        {
          type: 'pie',
          labelLine: {
            show: false,
          },
          z: 1,
          radius: 20,
          data: [
            {
              value: 5,
              itemStyle: {
                color: 'transparent',
              },
            },
          ],
        },
      ],
    },
  })

  // 创建完成
  onMounted(() => {})

  return {
    state,
  }
}
